<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('主页')" />
	<style>
		.pannel-body-custom{padding: 0px 0px 0px 8px;border-top:1px solid #eee;}
		.panel-heading-custom{color: #116baa}
		.panel-shadow{ box-shadow:  1px 1px 3px  rgba(0,0,0,.2)}

		.diagram-note {
			background-color: rgba(66, 180, 21, 0.7);
			color: White;
			border-radius: 5px;
			font-family: Arial;
			font-size: 12px;
			padding: 5px;
			min-height: 16px;
			width: 50px;
			text-align: center;
		}

		.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
			stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
		}

		.containers {
			background: white;
			overflow: auto;
			background-image: linear-gradient(
					90deg,
					rgba(220, 220, 220, 0.5) 6%,
					transparent 0
			),
			linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
			background-size: 12px 12px;
			width: 100%;
			height: calc(100vh - 82px);
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		}

		.property_table{
			margin: 2%;
			width: 96%;
			border-collapse: separate;
			border-spacing: 0;
		}
		.property_table_th{
			text-align:center;
			background: #f2f6f7;
			border-radius: 6px 6px 0px 0px;
			border: 1px solid #ccc;
		}
		.property_table td {
			border-right: 1px solid #c8c8c8;
			border-bottom: 1px solid #c8c8c8;
			padding:2px;
			text-align:center;background:#ffffff;
			font-size:11px;
		}

		.property_table input{
			height:24px;border-radius:2px;
			border:1px solid #eee;
			box-shadow: inset 1px 1px 1px rgb(0,0,0,.1);
			width:100%;
		}
		.left_title{
			width:100px;
			border-left: 1px solid #c8c8c8;
		}
	</style>
</head>

<body class="" >
	<div class="row">
		<div class="col-sm-12">

			<div id="toolbar2">act_ru_task</div>
			<table id="act_ru_task_table"></table>
			<div id="toolbar4">流程部署表</div>
			<table id="act_re_deployment_prod_def_table"></table>


				<div class="row">
					<div class="col-sm-12">
						<div class="panel panel-shadow">
							<div class="panel-heading panel-heading-custom">
								<i class="fa fa-exclamation-circle"></i>
								流程设计
							</div>
							<div class="panel-body">
								<div class="form-inline" id="flow_edit_form" style="color:#333;margin:6px;">
									<button class="btn btn-sm btn-primary" onclick="deploy_flow()">部署流程</button>
									<div class="btn-group">
										<button class="btn btn-white" onclick="handlerUndo()" type="button"><i class="fa fa-reply"></i></button>
										<button class="btn btn-white" onclick="handlerRedo()"type="button"><i class="fa fa-share"></i></button>
										<button class="btn btn-white" onclick="handlerZoom(-0.1)"type="button"><i class="fa fa-search-minus"></i></button>
										<button class="btn btn-white" onclick="handlerZoom(0.1)"type="button"><i class="fa fa-search-plus"></i></button>
									</div>
								</div>
								<div class="row" style="height:500px;">
									<div class="col-sm-8"  style="padding-right:0px;height:100%;">
										<div id="canvas" class="containers" style="height:100%;border:1px solid #bbb;border-radius:8px 0px 0px 8px;"></div>
									</div>
									<div class="col-sm-4" style="padding-left:0px; height:100%;">
										<div style="border:1px solid #bbb;border-left:0px;border-radius:0px 8px 8px 0px;height:100%;">

											<table class="property_table" style="">
												<tr><th colspan="2" class="property_table_th">全局属性</th></tr>
												<tr><td class="left_title">流程ID</td><td><input id="edit_form_flow_def_id" disabled/></td></tr>
												<tr><td class="left_title">流程名称</td><td><input id="edit_form_flow_def_name"/></td></tr>
											</table>

											<table class="property_table" style="">
												<tr><th colspan="2" class="property_table_th">节点属性</th></tr>
												<tr><td class="left_title">节点ID</td><td><input id="node_id"/></td></tr>
												<tr><td class="left_title">节点名称</td><td><input onchange="update_properties(this, 'name')" id="node_name"/></td></tr>
												<tr><td class="left_title">节点类型</td><td><input disabled id="node_type"/></td></tr>
											</table>

											<table class="property_table" style="">
												<tr><th colspan="2" class="property_table_th">用户任务属性</th></tr>
												<tr><td class="left_title">接收人</td><td><input id="assignee"/></td></tr>
												<tr><td class="left_title">候选人</td><td><input onchange="update_properties1(this, 'name')" id="candidate"/></td></tr>
											</table>


											<table class="property_table" style="">
												<tr><th colspan="2" class="property_table_th">网关属性</th></tr>
												<tr><td class="left_title">条件</td><td><input id="condition"/></td></tr>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div th:include="include :: footer"></div>
	<div th:include="include :: bpmn-modeler"></div>

    <script type="text/javascript">
	   	var options2 = {
				id: "act_ru_task_table",
				//formId: "form2",
				toolbar: "toolbar2",
				showHeader: true,
				smartDisplay: false,
				cardView: false,
				url: "/system/flowable/get_act_ru_task_pagedata",
				showRefresh: true,
				showToggle: true,
				showColumns: true,
				showSearch :true,
				search:function(){
					return {name:''}
				},
				showPaginationSwitch: false,
				pagination: true,
				pageSize:5,
				showToolbar: false,
				//createUrl: prefix + "/add",
				//removeUrl: prefix + "/remove",
				//updateUrl: prefix + "/edit/{id}",
				//modalName: "用户",
				columns: [
					{
						field : 'id_',
						title : 'id_',
						formatter: function(value, row, index) {
							return value + "<button class='btn btn-xs btn-success' onclick='proc_inst_task_complete(\""+value+"\")'>完成</button>";
						}
					},
					{
						field: 'rev_',
						title: 'rev_',
						align: 'center'
					},
					{
						field: 'execution_id_',
						title: 'execution_id_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'proc_inst_id_',
						title: 'proc_inst_id_',
						align: 'center',
						formatter: function(value, row, index) {
							return value + "<button class='btn btn-xs btn-success' onclick='(\""+value+"\")'>test</button>";
						}
					},
					{
						field: 'proc_def_id_',
						title: 'proc_def_id_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'task_def_id_',
						title: 'task_def_id_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'name_',
						title: 'name_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'task_def_key_',
						title: 'task_def_key_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'create_time_',
						title: 'create_time_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					},
					{
						field: 'assignee_',
						title: 'assignee_',
						align: 'center',
						formatter: function(value, row, index) {
							return value;
						}
					}
					]
			};

		var options4 = {
			id: "act_re_deployment_prod_def_table",
			url:'/system/flowable/get_act_re_deployment_pagedata',
			cardView:false,
			toolbar:"toolbar4",
			smartDisplay: false,
			pageSize: 5,
			columns: [
				{
					field : 'deployment_id_',
					title : 'deployment_id_',
					formatter: function(value, row, index) {
						return value
								+ "<button class='btn btn-xs btn-danger' onclick='delete_deploy(\""+value+"\")'>删除</button>";
					}
				},
				{
					field: 'deployment_name_',
					title: 'deployment_name_',
					align: 'center',
					formatter: function(value, row, index) {
						return value;
					}
				},
				{
					field: 'deploy_time_',
					title: 'deploy_time_',
					align: 'center',
					formatter: function(value, row, index) {
						return value;
					}
				},
				{
					field: 'parent_deployment_id_',
					title: 'parent_deployment_id_',
					align: 'center',
					formatter: function(value, row, index) {
						return value;
					}
				},
				{
					field: 'prod_def_id_',
					title: 'prod_def_id_',
					align: 'center',
					formatter: function(value, row, index) {
						return value+ "<button class='btn btn-xs btn-success' onclick='proc_inst_task_start(\""+value+"\")'>启动任务</button>"
								+ "<button class='btn btn-xs btn-primary' onclick='open_edit_deploy(\""+value+"\",\""+row.deployment_name_+"\")'>修改流程图</button>";
					}
				},
				{
					field: 'rev_',
					title: 'rev_',
					align: 'center',
				},
				{
					field: 'suspension_state_',
					title: 'suspension_state_',
					align: 'center',
				}
			]
		};

		$(function(){
			$.table.init(options2);
			$.table.init(options4);

			$(".fixed-table-body").css("border-radius","6px");
			$(".fixed-table-body").css("box-shadow","1px 1px 2px  rgba(0,0,0,.1)");
			//$(".fixed-table-body thead").css("background","#cdd");
		})

		function proc_inst_task_complete(proc_inst_id){
			$.post("/system/flowable/proc_inst_task_complete", {proc_inst_id:proc_inst_id} , function(re){
				$("#act_ru_task_table").bootstrapTable('refresh');
			})
		}

		function proc_inst_task_start(flow_def_id){
			$.post("/system/flowable/proc_inst_task_start", {flow_def_id:flow_def_id} , function(re){
				$("#act_ru_task_table").bootstrapTable('refresh');
			})
		}

		function delete_deploy(flow_def_id){
			$.post("/system/flowable/delete_deploy", {flow_def_id:flow_def_id} , function(re){
				$("#act_re_procdef_table").bootstrapTable('refresh');
				$("#act_re_deployment_table").bootstrapTable('refresh');
			})
		}

		var translations = {
			"Task" : "普通任务",
			"Service task": "服务任务",
			"User task": "用户任务",
			"Change element":"修改类型",
			"Parallel gateway":"并行网关",
			"Exclusive gateway":"排他网关"
		}
		function customTranslate(template, replacements){
			replacements=replacements||{};
			template = translations[template] || template;
			return template.replace(/{([^}]+)}/g, (_, key)=>{
				return replacements[key] || '{'+key+'}';
			});
		}

		var bpmnModeler = new BpmnJS({
			container: '#canvas',
			keyboard: {
				bindTo: window
			},additionalModules: [
				{
					// 禁用滚轮滚动
					zoomScroll: ["value", ""],
					translate: ["value" , customTranslate]
				}]
		});

		var selected_element;
		// 监听节点选择变化
		bpmnModeler.on('selection.changed', (e) => {
			const element = e.newSelection[0];
			selected_element = element;
			if(element && element.type) {
				$("#node_id").val(element.id);
				$("#node_name").val(element.di.bpmnElement.name);
				$("#node_type").val(element.type);
			}
			console.log(element)
		});

		//  监听节点属性变化
		bpmnModeler.on('element.changed', (e) => {
			const { element } = e
			console.log(element)
		});

		$(".bjs-powered-by").remove();

		async function openDiagram(bpmnXML) {
			// import diagram
			try {
				await bpmnModeler.importXML(bpmnXML);
				// access modeler components
				var canvas = bpmnModeler.get('canvas');
				var overlays = bpmnModeler.get('overlays');
				// zoom to fit full viewport
				canvas.zoom('fit-viewport');
				// attach an overlay to a node
				// overlays.add('sid-1F4FB3F9-47B4-4639-A073-31FD1C51F125', 'note', {
				// 	position: {
				// 		bottom: 0,
				// 		right: 0
				// 	},
				// 	html: '<div class="diagram-note">Mixed up the labels?</div>'
				// });
				// // add marker
				// canvas.addMarker('sid-1F4FB3F9-47B4-4639-A073-31FD1C51F125', 'needs-discussion');
			} catch (err) {
				console.error('could not import BPMN 2.0 diagram', err);
			}
		}
		function getFormattedDate() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			return year + month + day + hours + minutes + seconds;
		}
		var data_random = getFormattedDate();

		openDiagram(`<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.flowable.org/processdef" exporter="Flowable Open Source Modeler" exporterVersion="6.8.1">
  <process id="model`+data_random+`" name="模型`+data_random+`" isExecutable="true">
    <startEvent id="startEvent1" flowable:formFieldValidation="true"></startEvent>
    </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_model`+data_random+`">
    <bpmndi:BPMNPlane bpmnElement="model`+data_random+`" id="BPMNPlane_model`+data_random+`">
      <bpmndi:BPMNShape bpmnElement="startEvent1" id="BPMNShape_startEvent1">
        <omgdc:Bounds height="30.0" width="30.0" x="99.99999552965184" y="162.9999927133325"></omgdc:Bounds>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`);
		//$.get("/flowXml/new0825.bpmn20.xml",openDiagram,'text')

		async function deploy_flow(){
			try {
				var result = await bpmnModeler.saveXML({ format: true });
				var data = {
					flow_def_key	: $("#flow_def_key").val(),
					flow_def_name	: $("#flow_def_name").val(),
					flow_text		: result.xml
				};
				console.log(data);
				$.post("/system/flowable/deploy_flow",data,function(re){

					$("#act_re_procdef_table").bootstrapTable('refresh');
					$("#act_re_deployment_table").bootstrapTable('refresh');
				});
			} catch (err) {
				console.error('could not save BPMN 2.0 diagram', err);
			}


		}
		function handlerRedo() {
			bpmnModeler.get("commandStack").redo();
		}

		function handlerUndo() {
			bpmnModeler.get("commandStack").undo();
		}

		var scale=1;
		function  handlerZoom(radio) {
			const newScale = !radio ? 1.0 : this.scale + radio;
			bpmnModeler.get("canvas").zoom(newScale);
			scale = newScale;
		}

		function update_properties(_this, property_name){
			const element = this.bpmnModeler
					.get("elementRegistry")
					.get($("#node_id").val());
			if(element && element.type)
				var prop = {};
			prop[property_name] = $(_this).val();
			bpmnModeler.get('modeling').updateProperties(element, prop)
		}

		function open_edit_deploy(flow_def_id,edit_form_flow_def_name){
			$("#edit_form_flow_def_id").val(flow_def_id);
			$("#edit_form_flow_def_name").val(edit_form_flow_def_name);
			$.post("/system/flowable/get_deploy_flow_by_id",{flow_def_id: flow_def_id} , function(re){
				openDiagram(re.msg);
			})
		}
    </script>
</body>
</html>
